<template>
	<div style="padding: 5px;">
		<div style="background-color: #409EFF;color: #fff;padding: 5px;">
			{{centerParam.zl.title?centerParam.zl.title:'标题'}}
		</div>

		<div>

			<tx-param v-if="Object.keys(centerParam.zl).length>0&&centerParam.zl.param.cmdName==='通讯参数'" :tableData.sync="tableData" @on-search="searchRS" :curRow.sync="curRow" @init-table="initTable"></tx-param>

		</div>

		<div style="margin-top: 10px;">
			<el-table :data.sync="tableData" height="43vh" border style="width: 100%" size="mini" highlight-current-row
				@current-change="handleCurrentChange" class="zlxf-table" ref="centerTable">
				<el-table-column prop="vehNo" label="车牌号" width="180" :header-align="'center'">
				</el-table-column>
				<el-table-column prop="simNo" label="终端标识" width="180" :header-align="'center'">
				</el-table-column>
				<el-table-column prop="resp" label="状态" :header-align="'center'">
				</el-table-column>
				<el-table-column prop="address" label="操作" width="80" :header-align="'center'">
					<template slot-scope="scope">
						<el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>


		</div>





	</div>
</template>

<script>
	import txParam from './param/tx-param.vue'



	export default {

		name: 'zlxfCenter',
		components: {
			'tx-param': txParam
		},
		props: {
			centerParam: {
				type: Object,
				default: function() {
					return {};
				},
				required: true
			},
		},
		watch: {
			centerParam: {
				handler(val) {
					this.tableData = val.cars
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				tableData: [],
				curRow:null
			}
		},
		methods: {
			initTable(p){
				this.$refs.centerTable.setCurrentRow(-1)
				this.curRow=null
				for (var i = 0; i < this.tableData.length; i++) {
					const tl= this.tableData[i]
					this.$set(tl,'resp','')
					this.tableData[i]=tl
				}
			},
			searchRS(p){
				if(p){
					for (var i = 0; i < this.tableData.length; i++) {
						const tl= this.tableData[i]
						this.$set(tl,'resp',p[tl.simNo].status)
						this.tableData[i]=tl
					}
				}
				
			},
			handleCurrentChange(row) {
				if(row){
					this.curRow=row
				}
				
			},
			del(row) {
				const idx = this.tableData.findIndex(e => e.id === row.id)
				this.tableData.splice(idx, 1)
			}
		},
		mounted() {
			// console.log(this.centerParam)
		}

	}
</script>

<style lang="scss">
	.zlxf-table {
		.el-table__body tr.current-row>td {
			background-color: deepskyblue;
		}
	}
</style>